<script setup>
import { ref } from 'vue';
import { api } from '../boot/api';
import {messages} from '../state/store'
const props = defineProps({
    channelId: {
        type: String
    }
})
let file = ref(null)
let message = ref('')
let scrollToEnd = ()=>{
    let element = document.getElementById("chatContainer")
    element.scrollTop = element.scrollHeight;
}
const refreshMessage = () => {
    api.get("/channel/single_channel/" + props.channelId).then(res => {
        let response = res.data
        messages.value = response.data.channel_messages
    }).then(()=>{
        scrollToEnd()
    })
}

let sendMessage = () => {
    let paylaod = {
        channel_id: props.channelId,
        type: "str",
        filename: "filename",
        data: message.value
    }
    api({
        url: "/channel/add_message",
        data: paylaod,
        method: "post"
    }).then(res => {
        let response = res.data
        message.value = ''
    refreshMessage()

    })
    scrollToEnd();
}
let filePicker = () => {
    let input = document.createElement('input');
    input.type = 'file';
    input.onchange = e => {
        file.value = e.target.files[0];
        console.log(file.value)
        message.value = file.value.name
        let payload = {}
        payload.filename = file.value.name;
        let reader = new FileReader();
        reader.readAsDataURL(file.value);
        reader.onload = readerEvent => {
            let content = readerEvent.target.result;
            payload.data = content
            payload.type = 'file'
            payload.channel_id = props.channelId
            api({
                url: "/channel/add_message",
                data: payload,
                method: "post"
            }).then(res => {
                let response = res.data
                message.value = ''
                refreshMessage()

            })

        }
    }
    input.click();
    scrollToEnd()
}

</script>
<template>
    <div>
        <label for="chat" class="sr-only">Your message</label>
        <div class="flex items-center px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-700">
            <button @click="filePicker" type="button"
                class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
                        clip-rule="evenodd"></path>
                </svg>
                <span class="sr-only">Upload image</span>
            </button>
            <textarea v-model="message" id="chat" rows="1"
                class="block mx-4 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Your message..."></textarea>
            <button @click="sendMessage"
                class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600">
                <svg aria-hidden="true" class="w-6 h-6 rotate-90" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z">
                    </path>
                </svg>
                <span class="sr-only">Send message</span>
            </button>
        </div>
    </div>
</template>